<template>
  <div class="content">
  <el-tabs v-model="activeName2" type="card">
    <el-tab-pane label="成员" name="first" class="filter-item">
      <el-button type="primary" style="margin-bottom: 16px;" @click="userAdd()" plain>新增成员</el-button>
      <el-table :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="名字" prop="displayName">
      </el-table-column>
      <el-table-column align="center" label="手机号" prop="cellphone">
      </el-table-column>
      <el-table-column align="center" label="权限" prop="role.label">
      </el-table-column>
      <el-table-column align="center" label="后台账号" prop="username">
      </el-table-column>
      <el-table-column
      align="center"
      label="操作">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="UserEdit(scope.row)">编辑</el-button>
        <el-button type="text" size="small"  @click="dialogVisiblePassword(scope.row)">重置密码</el-button>
        <el-button type="text" @click="deleteUserF(scope.row.oid)" size="small">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    </el-tab-pane>
    <el-tab-pane label="方案" name="second">
      <el-form>
        <el-form-item>
          <el-button type="primary" style="margin-left: 14px;" @click = "programmeAdd">新增方案</el-button>
        </el-form-item>
        <el-table :data="curriculumListData" border fit highlight-current-row style="width: 100%">
          <el-table-column align="center" label="方案名字" prop="name">
          </el-table-column>
          <el-table-column align="center" label="方案APP" prop="apps">
          </el-table-column>
          <el-table-column align="center" label="方案课程" prop="courses">
          </el-table-column>
          <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editClick(scope.row)">编辑</el-button>
            <el-button type="text" @click="schemeDeleteF(scope.row.oid)" size="small">删除</el-button>
          </template>
        </el-table-column>
        </el-table>
      </el-form>
    </el-tab-pane>
  </el-tabs>
  <el-dialog
      title="重置密码"
      :visible.sync="dialogPasswordBox"
      width="30%"
      :before-close="handleClose">
      <el-form label-width="80px" v-model="password">
        <el-form-item label="新密码">
          <el-input icon="search" name="newPassword" v-model="password.newPassword"  placeholder="请输入新密码" id="name" style="width:200px"></el-input>
        </el-form-item>
      <input type="hidden" name="" v-model="password.oid" value="">
    </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogPasswordBox = false">取 消</el-button>
        <el-button type="primary" @click="dialogPasswordHide()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="方案删除"
      :visible.sync="schemeDeleteDialog"
      width="30%"
      :before-close="handleClose">
      <span>确定要删除选中的方案？</span>
      <input type="hidden" name="" v-model="demo.oid" value="">
      <span slot="footer" class="dialog-footer">
        <el-button @click="schemeDeleteDialog = false">取 消</el-button>
        <el-button type="primary" @click="schemeDeleteDialogHide()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="成员删除"
      :visible.sync="deleteUserDialog"
      width="30%"
      :before-close="handleClose">
      <span>确定要删除选中的成员？</span>
      <input type="hidden" name="" v-model="demo.oid" value="">
      <span slot="footer" class="dialog-footer">
        <el-button @click="activationDialog = false">取 消</el-button>
        <el-button type="primary" @click="deleteUserDialogHide()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import tabPane from '@/components/tabPane'
import axios from "axios";
import api from "@/api/configure";
import { Message } from "element-ui";
export default {
  data() {
    return {
      activeName2: "first",
      list: [
        {
          mm: {
            nn: "mmmmm",
            kk: "3423",
            dd: "2323"
          },
          ii: "888"
        }
      ],
      curriculumListData: [],
      dialogPasswordBox: false,
      deleteUserDialog: false,
      schemeDeleteDialog: false,
      password: {
        name: "",
        newPassword: "",
        agianPassword: ""
      },
      materialData: [],
      demo: {
        name: "",
        oid: "",
        schemeOid: ""
      },
      appsData: [
        {
          apps: "",
          name: ""
        }
      ]
    };
  },
  mounted() {
    this.memberList();
    this.curriculumList();
  },
  methods: {
    schemeDeleteF(tab) {
      this.schemeDeleteDialog = true;
      this.demo.schemeOid = tab;
    },
    handleClose(done) {
      // this.$confirm('确认关闭？')
      //   .then(_ => {

      //   })
      //   .catch(_ => {});
      done();
    },
    dialogPasswordHide() {
      let passwordData = {
        newPwd: this.password.newPassword,
        oid: this.password.oid
      };
      api.restPassword(passwordData).then(response => {
        this.$message({
          showClose: true,
          message: "重置成功!",
          type: "success"
        });
        this.dialogPasswordBox = false;
        this.curriculumList();
      });
    },
    dialogVisiblePassword(tab) {
      this.dialogPasswordBox = true;
      this.password.oid = tab.oid;
    },
    UserEdit(tab) {
      this.$router.push("/configure/userEdit?oid=" + tab.oid);
    },
    memberList() {
      api.memberListFun().then(response => {
        this.list = response;
      });
    },
    deleteUserF(tab) {
      this.deleteUserDialog = true;
      this.demo.oid = tab;
    },
    deleteUserDialogHide() {
      this.deleteUserDialog = false;
      let oidData = this.demo.oid;
      api.deleteUserFun(oidData).then(({ success, data }) => {
        this.$message({
          showClose: true,
          message: "删除成功!",
          type: "success"
        });
        this.dialogPasswordBox = false;
        this.memberList();
      });
    },
    curriculumList() {
      api.schemeList().then(response => {
        response.map((item, index) => {
          let appListData = [];
          let coursesListData = [];
          // courses值列表
          item.courses.map((item3, n) => {
            coursesListData.push(item3.name);
            response[index]["courses"] = JSON.stringify(coursesListData)
              .slice(1, JSON.stringify(coursesListData).length - 1)
              .replace(/"/g, "");
          });
          // console.log(coursesListData);
          // app值列表
          item.apps.map((item2, m) => {
            appListData.push(item2.name);
            response[index]["apps"] = JSON.stringify(appListData)
              .slice(1, JSON.stringify(appListData).length - 1)
              .replace(/"/g, "");
          });
        });
        // console.log(response);
        this.curriculumListData = response;
      });
    },
    programmeAdd() {
      this.$router.push("/configure/programmeAdd");
    },
    editClick(tab, event) {
      var path = "/configure/programmeEdit?oid=" + tab.oid;
      this.$router.push(path);
    },
    userAdd() {
      this.$router.push("/configure/userAdd");
    },
    schemeDeleteDialogHide() {
      this.schemeDeleteDialog = false;
      let schemeOid = this.demo.schemeOid;
      api.schemeDeleteFun(schemeOid).then(({ success, data }) => {
        this.$message({
          showClose: true,
          message: "删除成功！",
          type: "success"
        });
        this.curriculumList();
      });
    }
  }
};
</script>

<style scoped>
.tab-container {
  margin: 30px;
}
.content {
  margin-left: 30px;
  margin-top: 30px;
}
</style>
